<template>
  <div class="correct">
    <van-nav-bar title="纠偏工单" left-arrow @click-left="onClickLeft" />
    <div class="content" style="padding-top: 46px">
      <div class="selectContent" @click="changeSeach">
        <van-search left-icon="" right-icon="search" placeholder="请筛选" shape="round" />
        <div style="width: 140px; color: #666666">
          <img src="../../orderDispatch/img/icon_sx.png" alt="" width="16" height="16" />
          <span style="margin: 0 20px 0 4px">筛选 </span>
          <van-icon name="arrow-down" color="#cecece" />
        </div>
      </div>
      <van-popup v-model="showSource" round position="bottom">
        <div class="popTitle">
          <img src="../../orderDispatch/img/icon_sx_b.png" alt="" width="16" height="16" /> 筛选
        </div>
        <van-form>
          <van-field
            v-model="correctOrderId"
            input-align="right"
            label="纠偏单ID"
            placeholder="请输入纠偏单ID"
            clearable
          />
          <van-field
            v-model="villageId"
            input-align="right"
            label="目标市场ID"
            placeholder="请输入目标市场ID"
            clearable
          />
          <van-field
            v-model="correctEngineer"
            input-align="right"
            label="纠偏工程师姓名"
            placeholder="请输入纠偏工程师姓名"
            clearable
          />
          <van-field
            v-model="correctEngineerId"
            input-align="right"
            label="纠偏工程师工号"
            placeholder="请输入纠偏工程师工号"
            clearable
          />
          <popupSelect
            :searchKey="'correctProgress'"
            @valueObject="getValue"
            :columns="correctProgressLists"
            fieldClass="field"
            input-align="right"
            clearable
            label="纠偏进度"
            placeholder="请选择纠偏进度"
            :labelKey="'label'"
            :valueKey="'value'"
          >
          </popupSelect>
          <popupSelect
            :searchKey="'isOvertime'"
            @valueObject="getValue"
            :columns="statusList"
            fieldClass="field"
            input-align="right"
            clearable
            label="是否超时"
            placeholder="请选择是否超时"
            :labelKey="'label'"
            :valueKey="'value'"
          >
          </popupSelect>

          <div style="margin: 16px; display: flex">
            <van-button round block type="default"  @click="onReset">重置</van-button>
            <van-button round block type="info" native-type="submit" @click="onSearch">查询</van-button>
          </div>
        </van-form>
      </van-popup>
      <div class="form_content">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="item_content" v-for="(item, indexs) in lists" :key="indexs">
            <div class="title">
              <div class="number">
                <img src="../../orderDispatch/img/icon_title.png" alt="" />
                <div :class="isSelectIdx == indexs ? 'acitve' : ''">纠偏单ID：{{ item.correctOrderId }}</div>
              </div>
              <div class="btn" @click="handleReview(item, indexs)">查看</div>
            </div>
            <div class="deatil_content" v-if="!item.isShow">
              <div :class="its.class" v-for="(its, idx) in contentCorrect">
                <div class="">
                  <div class="label">
                    <van-icon name="circle" size="8" color="#2288FF" class="mr-4" /> <span>{{ its.label }}</span>
                  </div>
                  <div class="value">{{ item[its.key] }}</div>
                </div>
              </div>
            </div>
            <div class="deatil_content" v-else>
              <div :class="its.class" v-for="(its, idx) in contentCorrect.slice(0, 2)">
                <div class="">
                  <div class="label">
                    <van-icon name="circle" size="8" color="#2288FF" class="mr-4" /> <span>{{ its.label }}</span>
                  </div>
                  <div class="value">{{ item[its.key] }}</div>
                </div>
              </div>
            </div>
            <div class="showDiv" v-if="!item.isShow" @click="onToggle(item)"><van-icon name="arrow-up" /> 收起</div>
            <div class="showDiv" v-else @click="onToggle(item)"><van-icon name="arrow-down" /> 展开</div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>
        
  <script>
import popupSelect from '@/components/popupSelect'
import store from '@/store/'
import { sql2apiAction, postAction } from '@api/manage'
import Vue from 'vue'
import { mapState } from 'vuex'
import { contentCorrect } from './common'

export default {
  name: 'correctionSide',
  components: { popupSelect },
  data() {
    return {
      gridCode: null,
      showSource: false,
      correctOrderId: '',
      villageId: '',
      correctEngineer: '',
      correctEngineerId: '',
      correctProgress: '',
      isOvertime: '',
      correctProgressLists: [],
      statusList: [
        { label: '全部', value: '' },
        { label: '是', value: '2' },
        { label: '否', value: '1' },
      ],
      lists: [],
      loading: false,
      finished: false,
      pageNum: 1,
      pageSize: 10,
      contentCorrect,
    }
  },
  computed: {
    ...mapState({
      // 后台菜单
      isSelectIdx: (state) => state.todoread.isAcive,
    }),
  },
  mounted() {
    this.gridCode = localStorage.getItem('$gridId')
    this.getCorrectProgress()
    this.pageNum = 1
    this.pageSize = 10
    this.onSearch()
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: '/publicline/index',
      })
      store.commit('SET_ISACTIVE', null)
    },
    getValue(obj) {
      this[obj.key] = obj.value
    },
    changeSeach() {
      this.showSource = true
    },
    getCorrectProgress() {
      sql2apiAction('2c3ae8ab90481d7401904ee18bb50004', { ruleId: 'jpd' }).then((res) => {
        const { result, success } = res
        this.correctProgressLists = result
      })
    },
    //
    onReset() {
      this.correctOrderId = ''
      this.villageId = ''
      this.correctEngineer = ''
      this.correctEngineerId = ''
      this.correctProgress = ''
      this.isOvertime = ''
    },
    async getCorrectList() {
      let params = {
        gridId: this.gridCode,
        pageNo: this.pageNum,
        pageSize: this.pageSize,
        correctOrderId: this.correctOrderId,
        villageId: this.villageId,
        correctEngineer: this.correctEngineer,
        correctEngineerId: this.correctEngineerId,
        correctProgress: this.correctProgress,
        isOvertime: this.isOvertime,
      }
      this.loading = true
      const { data, code } = await postAction('api/order/correctionDeviationsList', { ...params })
      if (code == 1) {
        this.loading = false
        if (data.records.length > 0) {
          this.lists.push(...data.records)
          this.finished = data.records.length < this.pageSize
        } else {
          this.lists.length = 0
          this.finished = true
        }
      }
      this.onReset()
    },
    onSearch() {
      this.pageNum = 1
      this.pageSize = 10
      this.lists.length = 0
      this.showSource = false
      this.getCorrectList()
    },
    async onLoad() {
      this.loading = true
      setTimeout(() => {
        this.pageNum += 1
        this.getCorrectList()
      }, 1000)
    },
    handleReview(item, idx) {
      store.commit('SET_ISACTIVE', idx)
      this.$router.push({
        name: 'correctionSideDetail',
        params: {
          id: item.id,
        },
      })
    },
    onToggle(item) {
      item.isShow = !Boolean(item.isShow)
      this.$set(item, 'isShow', item.isShow)
    },
  },
}
</script>
  <style lang="less" scoped>
.acitve {
  color: #5972fa !important;
}
/deep/ .van-nav-bar {
  position: fixed;
  width: 100%;
}
/deep/ .van-tabs__wrap {
  position: fixed;
  width: 100%;
  margin-top: 46px;
  z-index: 9;
}
/deep/ .van-nav-bar__content {
  background: linear-gradient(134deg, #80d9f9 0%, #5466fa 100%);
}
/deep/ .van-nav-bar__title {
  font-size: 18px;
  color: #ffffff;
  letter-spacing: -0.6px;
  text-align: center;
}
/deep/ .van-nav-bar .van-icon {
  color: #fff;
  font-size: 20px;
}
/deep/ .van-tabs__line {
  width: 20px;
  margin-bottom: 3px;
}
/deep/ .van-tabs__nav--line {
  margin-bottom: 10px;
}
/deep/ .van-tab__text {
  font-size: 15px;
  color: #333333;
  letter-spacing: -0.53px;
}
/deep/ .van-field__label {
  width: 100px;
}
.correct {
  .selectContent {
    background: #fff;
    // padding: 8px 10px 8px 10px;
    border-top: 1px solid #dddada;
    display: flex;
    align-items: center;
    // margin-top: 88px;
    position: fixed;
    width: 100%;
    z-index: 9;
    div {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #666666;
      // .system{
      //   width: 86%;
      // }
    }
  }
  .popTitle {
    padding: 14px;
    font-size: 18px;
    color: #333333;
    letter-spacing: 0;
  }
  .form_content {
    margin-top: 60px;
    .item_content {
      background-image: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
      border-radius: 4px;
      // background: #fff;
      margin: 10px 0;
      .title {
        display: flex;
        align-items: center;
        padding: 8px 10px;
        justify-content: space-between;
        .number {
          display: flex;
          align-items: center;
          font-size: 16px;
          color: #333333;
          letter-spacing: 0;
          font-family: PingFangSC-Medium;
          font-weight: 600;
          margin-left: 6px;
        }
        .btn {
          width: 60px;
          background-image: linear-gradient(90deg, #7ab2ff 1%, #4d98ff 100%);
          color: #fff !important;
          text-align: center;
          font-size: 14px;
          border-radius: 10px;
        }
      }
      .w-c50 {
        width: calc(50% - 24px);
        margin-left: 24px;
        margin-bottom: 10px;
      }
      .w-c50:nth-child(odd) {
        width: calc(50% - 24px);
        margin-left: 24px;
        margin-bottom: 10px;
        border-right: 1px solid #eeeeee;
      }
      .deatil_content {
        display: flex;
        flex-wrap: wrap;
        // align-items: center;
        // justify-content: space-around;
        // padding-bottom: 6px;

        .items {
          //   width: calc(50% - 10px);
          //   margin-left: 10px;
          .line_item {
            display: flex;
          }
          .m0 {
            // width: 70%;
            margin: 0 auto;
          }
          .line {
            border-left: 1px solid #dbecff; /* 分割线的样式，可以自定义颜色和宽度 */
            border-right: 1px solid #dbecff; /* 分割线的样式，可以自定义颜色和宽度 */
            // width: 1px; /* 分割线的长度 */
            height: 20px;
            // line-height: 44px;
            margin: 12px 0;
          }
        }
        .mr-4 {
          margin-right: 4px;
        }
        .label {
          display: flex;
          align-items: center;
          span {
            font-size: 12px;
            color: #666666;
          }
        }
        .value {
          font-size: 13px;
          margin-top: 2px;
          margin-left: 12px;
          margin-right: 10px;
        }
      }
      .showDiv {
        color: #2288ff;
        text-align: center;
        border-bottom: 1px solid rgba(223, 237, 255, 0.6);
      }
    }
  }
}
</style>
        